<style type="text/css">
<!--
@import url("template/templatemo_style.css");
@import url("template/css/featuredcontentglider.css");
@import url("template/jqwidgets/jqx.base.css");
@import url("template/avgrund.css");

-->
</style>

<script src="js/jquery-1.8.2.min.js"></script>
<script src="template/jqwidgets/jqxcore.js"></script>
<script src="template/jqwidgets/jqxmenu.js"></script>
<script src="js/jquery.avgrund.js"></script>

<script type="text/javascript">
function clearText(field)
{
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}

$(document).ready(function () {
    // Create a jqxMenu
    $("#menu").jqxMenu({});
});

$(function() {
	$('#show').avgrund({
		height: 200,
		width : 380,
		//height of the container
		holderClass: 'custom',
		showClose: true,
		showCloseText: 'Close',
		enableStackAnimation: true,
		onBlurContainer: '.body',
		template: 
	    '<form action="LoginServlet" method="POST">'+
			  '<h5 style="margin-left: 20px; color: #BCBEC0; margin-top: 10px">Raffles Medical Centre Login</h5>'+
		    	'<table style="margin-left: 50px;">'+
		    		'<tr style="height: 50px">'+
			    		'<td>Login&nbsp;as:</td>'+
			    		'<td>'+
			    			'<input type="radio" name="type" value="Patient"></input> Patient'+
							'<input type="radio" name="type" value="Caregiver"></input> Caregiver'+
							'<input type="radio" name="type" value="GP"></input> GP'+
						'</td>'+
		    		'</tr>'+
		    		'<tr>'+
			    		'<td>Username: </td> <td><input type="text" id="user"></input> </td>'+
		   			'</tr>'+
				   	'<tr>'+
				    	'<td>Password: </td><td><input type="text" id="password"></input></td>'+
				    '</tr>'+
		    		'<tr>'+
		    			'<td><input type="submit" value="Log In" id="Login" style="background-color: #E6E6E6; border: 1px solid #A4A4A4; padding: 5px 10px; -moz-border-radius: 5px; border-radius: 5px"></input>'+
		    			'</td>'+
		    			'<td><a href="#">Forget Your Password?</a></td>'+
		    		'</tr>'+
		    '</table>'+
	'</form>'+
	'<br />'
	});
});
</script>
<body>

<div id="templatemo_wrapper_outer">
<div id="templatemo_wrapper">

	<div id="temmplatmeo_header">
    
   		<div id="site_title">
           	<a href="http://www.templatemo.com" target="_parent">
            	<img src="template/images/templatemo_logo.png" alt="free css template" />
            </a>
        </div>
    
    	<div id="menu">
        
            <ul>
                <li><a href="" target="_parent">Services</a>
                	<ul>
                            <li><a href="#">Caregiver</a>
                            <ul>
                            	<li><a href="caregiverAdministrate.jsp">Administrate Caregiver</a></li>
                            </ul>
                            </li>
                            <li><a href="consultation.jsp">Online Consultation</a>
                            </li>
                            
                            <li><a href="#">Prescription</a>
                            <ul>
                            	<li><a href="createPrescription.jsp">Create Prescription</a></li>
                            	<li><a href="retrievePrescription.jsp">Retrieve Prescription</a></li>
                            </ul>
                            </li>                          
                    </ul>
                </li>
                <li><a href="http://www.templatemo.com" target="_parent">Latest News</a></li>
          		<li><a href="http://www.koflash.com" target="_parent">Discussions</a></li>
		        <li><a href="#">Contact Us</a></li>
		        <li><a href="#" class="current" id="show">Login</a></li>
            </ul>    	
        
        </div> <!-- end of templatemo_menu -->
    
    </div> <!-- end of templatemo_header -->
    
<div id="templatemo_content_wrapper_top"></div>
<div id="templatemo_content_wrapper">
	<div id="content">
  